<template>
  <div id="reg">
    <van-nav-bar
        title="注册页"
        left-text="返回"
        right-text="去登录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />

    <van-form @submit="onSubmit">
      <van-field
          v-model="value"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          @blur="iptBlur"
      />
      <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="tel"
          type="text"
          name="电话"
          label="电话"
          placeholder="电话"
          :rules="[{ required: true, message: '请输入电话' }]"
          @focus="iptFocus"
      />
      <van-cell title="生日" :value="date" @click="dateShow = true" />
      <van-calendar v-model="dateShow" @confirm="onConfirm" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-number-keyboard
        v-model="tel"
        :show="show"
        :maxlength="11"
        @blur="show = false"
    />

  </div>
</template>

<script>
export default {
  name: "userRegister",
  data() {
    return {
      username: '',
      password: '',
      tel: '',
      show: false,
      value: '',
      date: '',
      dateShow: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      console.log(date)
      this.dateShow = false;
      this.date = this.formatDate(date);
    },
    onClickLeft() {
      this.$router.push('/home');
    },
    onClickRight() {
      this.$router.push('/login');
    },
    iptBlur() {

    },
    iptFocus() {
      // 禁止弹出手机键盘
      document.activeElement.blur();
      this.show = true;
      console.log('获得了焦点')
    }
  },
}
</script>

<style scoped>

</style>